<template>
  <div class="role-guard-container">
    <div class="header">
      {{ roleDescription }}
      <el-button
        size="small"
        type="primary"
        :loading="btnLoading"
        @click="updateRoleGuard"
        v-if="!(roleType==='system'&&roleName==='admin')"
      >保存</el-button>
    </div>
    <el-table
      size="small"
      stripe
      border
      :data="tableData"
    >
      <el-table-column
        label="权限"
        align="center"
        width="200"
      >
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column
        :label="roleDescription"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            size="small"
            type="success"
            icon="el-icon-check"
            circle
            v-if="guardUuidList.includes(scope.row.uuid)"
            @click="deleteRoleGuard(scope.row)"
          ></el-button>
          <el-button
            size="small"
            type="danger"
            icon="el-icon-close"
            circle
            v-else
            @click="addRoleGuard(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Message, MessageBox } from 'element-ui';
import { getRoleListApi, updateRoleGuardListApi } from '../../../api/role';
import { parseError } from '../../../utils';
import { getGuardListApi } from '../../../api/guard';

export default {
  data() {
    return {
      roleList: [],
      guardList: [],
      tableData: [],
      role: null,
      guardUuidList: [],
      roleName: '',
      btnLoading: false,
      roleType: '',
      roleDescription: ''
    };
  },
  created() {
    this.search();
  },
  methods: {
    async search() {
      try {
        [this.roleList, this.guardList] = await Promise.all([getRoleListApi(), getGuardListApi()]);
        this.roleList.forEach(role => {
          role.guardUuidList = role.guard_list.map(guard => guard.uuid);
        });
        this.role = this.roleList.find(role => role.uuid === this.$route.query.uuid);
        this.roleName = this.role.name;
        this.roleDescription = this.role.description;
        this.roleType = this.role.type;
        this.guardUuidList = this.role.guardUuidList;
        this.$nextTick(() => (this.tableData = this.guardList));
        this.$forceUpdate();
      } catch (error) {
        Message.error(parseError(error));
      }
    },
    addRoleGuard(guard) {
      this.role.guardUuidList.push(guard.uuid);
    },
    deleteRoleGuard(guard) {
      const index = this.role.guardUuidList.findIndex(uuid => guard.uuid === uuid);
      this.role.guardUuidList.splice(index, 1);
    },
    updateRoleGuard() {
      MessageBox.confirm('是否应用权限', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning'
      })
        .then(() => {
          this.btnLoading = true;
          updateRoleGuardListApi(this.role.uuid, this.guardUuidList)
            .then(res => {
              Message.success('应用成功');
              this.$router.back();
            })
            .catch(error => Message.error(parseError(error)))
            .finally(() => (this.btnLoading = false));
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.role-guard-container {
  padding: 10px;
  .header {
    font-size: 24px;
    font-weight: 800;
    padding-bottom: 20px;
    margin: 10px 10px 0 10px;
    .el-button--primary {
      float: right;
      background-color: #2c83b1 !important;
      border-color: #2c83b1 !important;
    }
  }
}
</style>
